<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script src="../lib/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
        class MyComponent extends React.Component {
            state = {
                username: '',
                password: ''
            }
            saveFormData = (dataType) => {
                console.log(`你输入的是${dataType}`)
                return (event) => {
                    console.log(`你的${dataType}为:${event.target.value}`)
                    this.setState({[dataType]:event.target.value})
                    //由于会触发render函数的再次调用,所以先注释
                    //必须使用[]表示里面的属性,不能用{},因为[]里面是一个变量的计算结果,而.的形式是直接使用
                    //高阶函数的定义:1.函数的参数是另一个函数2.函数的返回值是一个函数
                    //函数柯里化:将多个参数转变为单个参数接收,即用返回函数并嵌套继续接收参数,(作用:1.延迟回调,参数复用，动态生成函数)
                }
            }
            submit = (event) => {
                event.preventDefault()
                const { username, password } = this
            }
            render() {
                return (
                    <form onSubmit={this.submit}>
                       { 
                        //    react刚开始自动调的是一个函数，后面触发的就是函数的返回值了，所以要函数柯里化取接收参数
                        // (由于不能直接接收event(因为他是react调的,而react调的是函数的返回值,所以要在返回函数里面接收参数))
                       }
                        <input type="text" placeholder="请输入内容" name="username" onChange={this.saveFormData('username')} />
                        <input type="text" placeholder="请输入内容" name="password" onChange={this.saveFormData('password')} />
                    </form>
                )
            }
        }
        ReactDOM.render(<MyComponent/>, document.getElementById('test'))
        var obj={
            age:'23',
            name:'fwe'
        }
        console.log(obj.age)
        console.log(obj['age'])
        obj.sex='男'
        console.log(obj)
        obj['weight']='wfew'
        console.log(obj)
    </script>
</body>

</html>